{extend name="base"}
{block name="style"}
<!-- 这里允许在引入一些样式头部 -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="{:_static()}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/task.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />
{/block}

{block name="main"}
<style type="text/css">
	.ws-main{padding: 15px;}
	a:hover{color: inherit !important;}
</style>


	<div class="layui-form">
	  	<table class="layui-table">
		    <thead>
		      	<tr>
			        <th>编号</th>
			        <th>好友号码</th>
			        <th>微信备注名</th>
			        <th>是否添加</th>
			        <th>添加结果</th>
			        <th>数据来源</th>
			        <th>创建时间</th>
			        <!-- <th>操作</th> -->
		      	</tr> 
		    </thead>
		    <tbody>
		    	{volist name="list" id="data"}
		      	<tr>
			        <td>{$data.id}</td>
			        <td>{$data.number}</td>
			        <td>{$data.renarks}</td>
			        <td>{if condition="$data.is_add eq '0'"}已添加{elseif condition="$data.is_add eq '1'"}未添加{/if}</td>
			        <td>{if condition="$data.result eq '0'"}添加成功{elseif condition="$data.result eq '1'"}添加失败{/if}</td>
			        <td>{$data.snumber}</td>
			        <td>{$data.s_time|date="Y-m-d H:i:s"}</td>
			        <!-- <td>
			    		<button class="layui-btn layui-btn-danger layui-btn-mini"><i class="layui-icon"></i>删除</button>
			        </td> -->
		      	</tr>
		      	{/volist}
			    <!-- <tr>
			        <td>1</td>
			        <td>文字</td>
			        <td>文字</td>
			        <td>文字</td>
			        <td>文字</td>
			        <td>文字</td>
			        <td>文字</td>
			        <td>
			    		<button class="layui-btn layui-btn-danger layui-btn-mini"><i class="layui-icon"></i>删除</button>
			        </td>
			    </tr> -->
		    </tbody>
	  	</table>
	  	<!-- 分页 -->
	  	<div id="pagination1"></div>
	</div>
	<div id="page"></div>

<script type="text/javascript" src="{:_static()}/layui/layui.js"></script>
<script type="text/babel" src="{:_static()}/js/common.js"></script>

<!-- 导入Excel -->
<link rel="stylesheet" href="{:_static()}/wsvue/index.css">
<script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
<script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:'#app',
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		checkData:[], // 选中数据
		nav:{$_nav|stripslashes|raw},
	},
	methods:{
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
	}
});

layui.config({
	base : "js/"
}).use(['form','layer','jquery','laypage'],function(){
	var form = layui.form(),
		layer = parent.layer === undefined ? layui.layer : parent.layer,
		laypage = layui.laypage,
		$ = layui.jquery;


	//添加设备
	$(".deviceAdd_btn").click(function(){
		layer.prompt({title: '添加设备'}, function(val, index){
		  // layer.msg('得到了'+val);
		  layer.close(index);
		});
	})

	//全选
	form.on('checkbox(allChoose)', function(data){
		var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
		child.each(function(index, item){
			item.checked = data.elem.checked;
		});
		form.render('checkbox');
	});

	//通过判断文章是否全部选中来确定全选按钮是否选中
	form.on("checkbox(choose)",function(data){
		var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
		var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
		if(childChecked.length == child.length){
			$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
		}else{
			$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
		}
		form.render('checkbox');
	})

	//是否展示
	form.on('switch(isShow)', function(data){
		var index = layer.msg('修改中，请稍候',{icon: 16,time:false,shade:0.8});
        setTimeout(function(){
            layer.close(index);
			layer.msg("展示状态修改成功！");
        },2000);
	})
 
	//操作
	$("body").on("click",".news_edit",function(){  //编辑
		layer.alert('您点击了文章编辑按钮，由于是纯静态页面，所以暂时不存在编辑内容，后期会添加，敬请谅解。。。',{icon:6, title:'文章编辑'});
	})

	$("body").on("click",".news_collect",function(){  //收藏.
		if($(this).text().indexOf("已收藏") > 0){
			layer.msg("取消收藏成功！");
			$(this).html("<i class='layui-icon'>&#xe600;</i> 收藏");
		}else{
			layer.msg("收藏成功！");
			$(this).html("<i class='iconfont icon-star'></i> 已收藏");
		}
	})

	$("body").on("click",".news_del",function(){  //删除
		var _this = $(this);
		layer.confirm('确定删除此信息？',{icon:3, title:'提示信息'},function(index){
			//_this.parents("tr").remove();
			for(var i=0;i<newsData.length;i++){
				if(newsData[i].newsId == _this.attr("data-id")){
					newsData.splice(i,1);
					newsList(newsData);
				}
			}
			layer.close(index);
		});
	})

	// //分页
	// laypage({
	//     cont: 'pagination1'
	//     ,pages: 100 //总页数
	//     ,groups: 5 //连续显示分页数
 //  	});
})

</script>
{/block}